<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html >  
<html>  

<head>  
<base href="<%=basePath%>">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="./css/weui.css" />
<link rel="stylesheet" href="./css/wx.css" />
<link rel="stylesheet" href="./css/example.css" />
<link rel="stylesheet" href="./js/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script src="./js/ajaxfileupload.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>图片病历上传</title>  
<script type="text/javascript">
var storage = window.localStorage;
var userCode = storage.getItem("primaryRole");
var roleCode = storage.getItem("currentRole");
var name = storage.getItem("currentName");
var imgSum = 0;
var currImgCode;    
$(document).ready(function(){  
	$("#userName").html("("+name+")");
});

//切换角色
function changeRole(){
	$.ajax({
 	url: "./user/getRoles",
       	type: "POST",
       	data : {
       		primaryRole : storage.getItem("primaryRole")
       	},
      	dataType: 'json',
       	cache: false,
       	success: function (ret) {
       		if(ret.resultCode==0){
       			roleMenu();
       			var roleHTML="";
	        	$("#role").html("");
               	for(var i=0;i<ret.content.length;i++){
               		roleHTML+="<label class=\"weui_cell weui_check_label\" for=\"x"+(i+1)+"\">";
                roleHTML+="<div class=\"weui_cell_bd weui_cell_primary\">";
	                roleHTML+=" <p>"+ret.content[i].userName+"</p> </div>";
				 	roleHTML+="<div class=\"weui_cell_ft\">";
				 	roleHTML+="<input type=\"radio\" class=\"weui_check\" name=\"radio100\" id=\"x"+(i+1)+"\" value="+ret.content[i].userCode+">";
				 	roleHTML+="<span class=\"weui_icon_checked\"></span>";
				 	roleHTML+="</div></label>";
			 	}
				$("#role").html(roleHTML);
       		}else{
       			alert(ret.msg);
       			window.location.href = "./jsp/login.jsp";
       		}
      	}
   	});
}

function roleMenu(){
    var w_height = $(window).height();
    $('.theleftmenu').css('height',w_height);
    $('.theleftmenu').css('display','block');
    //   弹出边菜单
    $('.theleftmenu .bg_mark').css('display','block');
    
    $('.theleftmenu .theleftmenu_con ' ).stop().animate({ left: '0' }, 400);
    $('.cancle').click(function(){
    	  $('.theleftmenu').css('height',w_height);
        $('.theleftmenu .leftmenu_con ').stop().animate({ left: '-100%' }, 400);
        setTimeout(function(){
            $('.theleftmenu,.bg_mark').fadeOut('fast');
        },200);
    });
}

function commit(){
	var w_height = $(window).height();
	var val = $("input[name='radio100']:checked").val();
	if(val==storage.getItem("primaryRole")){//如果选择的和主用户一样
		storage.setItem("currentRole",val);
		storage.setItem("isMainRole",1);
	}else{
		storage.setItem("currentRole",val);
		storage.setItem("isMainRole",0);
	}
	$.ajax({
       	url: "./user/currRole",
       	type: "POST",
       	data:{
       		currRole : val,
			isMainRole : storage.getItem("isMainRole")          		
       	},
       	dataType: 'json',
       	cache: false,
       	success: function (ret) {
         	if (ret.resultCode==0) {
       	   	  	$('.theleftmenu').css('height',w_height);
       	      	$('.theleftmenu .theleftmenu_con ').stop().animate({ left: '-100%' }, 400);
       	      	setTimeout(function(){
       	          	$('.theleftmenu,.bg_mark').fadeOut('fast');
       	      	},200);
       	      	var now = getSmpFormatNowDate(false);
       	      	var birth = getSmpFormatDateByLong(ret.content.birth,false);
       	      	/* var age = DateDiff(now,birth);//多少天  */
       	      	var age = ret.content.day;//多少天 
       	      	var sex = ret.content.sex;
       	      	storage.setItem("curSex",sex);
       	      	storage.setItem("curage",age);
      	      	storage.setItem("currentName",ret.content.userName);
  				ageFlag = dayToAgeFlag(age);
        	  	storage.setItem("curAgeFlag",ageFlag);
        	  	window.location.reload();
          }
       }
   });
}
    
function ajaxFileUpload(){
    $.ajaxFileUpload({
            url: "./imageOpt/photoUpload",
            secureuri: false, 
            fileElementId: 'file1', 
            dataType: 'json', 
            success: function (data, status){
            	if(data.resultCode==0){
            		if(imgSum==0){
            			
            			createCaseHistoryImg(data.content);
            			imgSum++;
            		}else{
            			addCaseHistoryImg(data.content);
            		}
					
            	}
            }
        }
    )
    return false;
}

function createCaseHistoryImg(imgUrl){
	$.ajax({
       	url: "./myCaseHistory/createCaseHistoryImg",
       	type: "POST",
       	data:{
       		name:'',
       		userCode:userCode,
       		roleCode:roleCode,
       		imgUrl:imgUrl        		
       	},
       	dataType: 'json',
       	cache: false,
       	success: function (ret) {
       		if(ret.resultCode==0){
				currImgCode = ret.content;
				getMyCaseHistoryImg();
       		}
       	}
   });
}

function add(imgUrl,id){
	var img = document.getElementById("img");  
    var div = document.createElement("div");
    div.innerHTML='<div style="position: relative;"><img alt="" src="../img/'+imgUrl+'" style="width:100%">'
    			+'<span class="del fa fa-times" aria-hidden="true" onclick="delCaseHistoryImg(\''+id+'\')"></span><div>';  
    img.appendChild(div);
}

function addCaseHistoryImg(imgUrl){
	$.ajax({
       	url: "./myCaseHistory/addCaseHistoryImg",
       	type: "POST",
       	data:{
			code : currImgCode,
       		imgUrl:imgUrl        		
       	},
       	dataType: 'json',
       	cache: false,
       	success: function (ret) {
       	  	getMyCaseHistoryImg();
       	}
   });
}

function delCaseHistoryImg(id){
	$.ajax({
       	url: "./myCaseHistory/delCaseHistoryImg",
       	type: "POST",
       	data:{
			id :id       		
       	},
       	dataType: 'json',
       	cache: false,
       	success: function (ret) {
       	  	getMyCaseHistoryImg();
       	}
   });
}

function getMyCaseHistoryImg(){
	$.ajax({
       	url: "./myCaseHistory/getMyCaseHistoryImg",
       	type: "POST",
       	data:{
			code : currImgCode      		
       	},
       	dataType: 'json',
       	cache: false,
       	success: function (ret) {
       	  	$("#img").html('');
			for(var i=0;i<ret.length;i++){
				add(ret[i].imgUrl,ret[i].id);
			}
       	}
   });
}

function ok(){
	window.location.href = "./jsp/caseHistory/caseHistoryList.jsp";
}
</script>
<style type="text/css">
.fileinput-button {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.fileinput-button input{
    position:absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 200px;
}
.btn-upload{
    border: 1px solid #efefef;
    border-radius: 6px;
    padding: 8px;
    color: #fff;
    background-color: #04be02;
}
.del{
	display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    right: 0;
    z-index: 999999;
    margin: 5px;
    color: #e64340;
}
</style>  
</head>  
<body>  
<div class="page">
    <div class="bd">
	    <div class="weui_grids">
	     	<div class="weui_cells_title" style="text-align: center;font-size: 18px;">新增图片病历
	     	<span id="userName" class="btn" onclick="changeRole();" style="vertical-align: initial !important;padding:1px !important;color: rgba(247, 47, 2, 0.5);width: 18%;font-size: 14px;"></span>
	    </div>
    	<div style="border: 1px solid #efefef;margin-bottom:10px;"></div>
    	<div id="img"></div>
	    <div align="center">
	        <span class="btn fileinput-button btn-upload" >
	            <span>选择</span>
	            <input type="file" id="file1" name="file">
	        </span>
	        <span class="btn fileinput-button btn-upload"  onclick="ajaxFileUpload()">
	            <span>上传</span>
	            <input type="button" value="上传"/>
	        </span>
	        <span class="btn fileinput-button btn-upload" onclick="ok()">
	            <span>完成</span>
	            <input type="button" value="完成" />
	        </span>
	    </div>
	</div>
</div>	
<section class="theleftmenu" style="height: 627px; display: none;">
	<span class="bg_mark" style="display: none;"></span>
	<div class="theleftmenu_con"  style="background-color: #fff;width: 90%;height:auto;margin-top: 30%;margin-left: 5%;text-align: center;">
		<p class="m_tit" style="font-size: 18px;padding-top: 5px;">请选择角色</p>
		<div class="weui_cells weui_cells_radio" id="role"></div> 
     	<a href="javascript:;" class="weui_btn weui_btn_plain_primary" style="margin: 3px;" onclick="commit();">确定</a>
	</div>
</section>
</body>  
</html> 